<template>
    <div class="goods">
        <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
        <el-submenu index="1">
            <template slot="title">匕首</template>
            <el-menu-item index="鲍伊猎刀">鲍伊猎刀</el-menu-item>
            <el-menu-item index="蝴蝶刀">蝴蝶刀</el-menu-item>
            <el-menu-item index="弯刀" >弯刀</el-menu-item>
            <el-menu-item index="折叠刀">折叠刀</el-menu-item>
            <el-menu-item index="穿肠刀">穿肠刀</el-menu-item>
            <el-menu-item index="猎杀者匕首">猎杀者匕首</el-menu-item>
            <el-menu-item index="暗影双匕">暗影双匕</el-menu-item>
            <el-menu-item index="流浪者匕首">流浪者匕首</el-menu-item>
            <el-menu-item index="骷髅匕首">骷髅匕首</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title">手枪</template>
            <el-menu-item index="P2000">P2000</el-menu-item>
            <el-menu-item index="USP 消音版">USP 消音版</el-menu-item>
            <el-menu-item index="格洛克 18 型">格洛克 18 型</el-menu-item>
            <el-menu-item index="CZ75 自动手枪">CZ75 自动手枪</el-menu-item>
            <el-menu-item index="R8 左轮手枪">R8 左轮手枪</el-menu-item>
            <el-menu-item index="沙漠之鹰">沙漠之鹰</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title">步枪</template>
            <el-menu-item index="加利尔 AR">加利尔 AR</el-menu-item>
            <el-menu-item index="SCAR-20">SCAR-20</el-menu-item>
            <el-menu-item index="法玛斯">法玛斯</el-menu-item>
            <el-menu-item index="SG 553">SG 553</el-menu-item>
            <el-menu-item index="AK-47">AK-47</el-menu-item>
            <el-menu-item index="AWP">AWP</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
            <template slot="title">微型冲锋枪</template>
            <el-menu-item index="P90">P90</el-menu-item>
            <el-menu-item index="MAC-10">MAC-10</el-menu-item>
            <el-menu-item index="UMP-45">UMP-45</el-menu-item>
            <el-menu-item index="PP-野牛">PP-野牛</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
            <template slot="title">霰弹枪</template>
            <el-menu-item index="截短霰弹枪">截短霰弹枪</el-menu-item>
            <el-menu-item index="XM-1014">XM-1014</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
            <template slot="title">印花</template>
            <el-menu-item index="十周年">十周年</el-menu-item>
            <el-menu-item index="22安特卫普">22安特卫普</el-menu-item>
            <el-menu-item index="战地2042">战地2042</el-menu-item>
            <el-menu-item index="激流冲浪店">激流冲浪店</el-menu-item>
            <el-menu-item index="激流大行动">激流大行动</el-menu-item>
            <el-menu-item index="段位印花">段位印花</el-menu-item>
            <el-menu-item index="狂牙大行动">狂牙大行动</el-menu-item>
            <el-menu-item index="糖果脸谱印花">糖果脸谱印花</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
            <template slot="title">其他</template>
            <el-menu-item index="工具">工具</el-menu-item>
            <el-menu-item index="涂鸦">涂鸦</el-menu-item>
            <el-menu-item index="收藏品">收藏品</el-menu-item>
            <el-menu-item index="通行证">通行证</el-menu-item>
            <el-menu-item index="礼物">礼物</el-menu-item>
            <el-menu-item index="音乐盒">音乐盒</el-menu-item>
            <el-menu-item index="武器箱">武器箱</el-menu-item>
        </el-submenu>
    </el-menu>
    <div class="goods2">
    <div class="search">
    <input type="text" placeholder=" 输入物品名称"  v-model="title"><el-button type="danger" @click="search">搜索</el-button>
  </div>
    <div class="blank"></div>
      <div class="product">
      <h1 class="h1">饰品市场</h1>
      <div class="blank"></div>
      <el-row :gutter="20" style="width:1400px;margin:0 auto">
        <el-col :span="5" v-for="(product,index) in pageProducts" :key="product?product.id:index" style="margin-bottom:20px;">
          <el-card v-if="product" :body-style="{ padding: '0px' }">
            <img :src="product.imgPath"
              class="image" @click="goDetail(product.id)" style="width: 100%;margin:0 auto">
            <div style="padding: 14px;">
              <span>{{product.title}}</span>
              <p>{{product.price}}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    </div>
    <el-pagination
  background
  layout="prev, pager, next"
  :page-count="pageCount" @current-change="getPagedata">
</el-pagination>
    </div>
  </template>
  <script>

export default {
    name: 'GoodsView',
   data(){
    return {
        products:[],
        activeIndex: '1',
        activeIndex2: '1',
        pageSize:8,
        pageIndex:1,
        title:'',
        zhenze:'',
        neirong:true
    }
   },
   computed:{
    pageCount(){
      return Math.ceil(this.products.length/this.pageSize)
    },
    pageProducts(){
      let tempProducts=[]
      for(var i=(this.pageIndex-1)*this.pageSize;i<this.pageIndex*this.pageSize;i++){
        tempProducts.push(this.products[i])
      }
      return tempProducts
    }
   },
   created(){
    this.axios.get('/api/goods')
    .then(res => {
      this.products = res.data.data
    })
  },
  methods:{
      goDetail(pId){
        this.$router.push('/detail?productId=' + pId)
      },
      handleSelect(key, keyPath) {
          console.log(key, keyPath)
          this.axios.get('/api/goods')
        .then(res => {
          this.pageIndex=1
          this.products = res.data.data
          this.products=this.products.filter((item) => {
              return item.type == key
          })
        })
      },
      getPagedata($event){
         this.pageIndex=$event
      },
      search(){
        this.axios.get('/api/goods')
        .then(res => {
          this.pageIndex=1
          this.products = res.data.data
        let zhenze=new RegExp(this.title,'g')
        this.products=this.products.filter((item) => {
          return zhenze.test(item.title)              
      })
    })
   }
}}
</script>
<style lang="scss" scoped>
  a{
    text-decoration: none;
    color: #000;
  }
  .goods{
    background: #ededed;
    min-width: 1240px;
    color: #333;
    background: url('https://cdn.buff.163.com/static/images/site/header-bg_csgo.jpg')no-repeat center top;
  }
  .goods2{
    width: 1100px;
    height: 750px;
    margin: 0 auto;
    background: #fafafa;
    padding: 20px 25px; 
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
    text-align: center;
    background: url('https://cdn.buff.163.com/static/images/item_bg.png');
    background-size: cover;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }
  .mainbody{
    width: 80%;
    margin: 0 auto;
}
.dropdowns{
    float: left;
    margin-top: 20px;
}
.el-dropdown {
    vertical-align: top;
}

.el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}
.blank{
  height: 20px;
}
.h1{
  text-align: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .search{
    float: right;
  }
  .el-card{
    border: 1px solid #E4E4E4;
    float: left;
    margin: 0 25px 20px 0;
    position: relative;
    padding-bottom: 9px;
    width: 200px;
    height: 280px;
    background:#F9F9F9 ;
    border-radius: 2px;
  }
  [type=text]{
   height: 32px;
  }
</style>